<template>
    <a-row :gutter="24">
        <a-col :md="24">
            <a-card :style="cardStyle" :bordered="false">
                <!-- 查询区域 -->
                <div class="table-page-search-wrapper">
                    <!-- 搜索区域 -->
                    <a-form layout="inline" @keyup.enter.native="searchQuery">
                        <a-row :gutter="24">
                            <a-col :md="4" :sm="24">
                                <a-form-item label="名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
                                    <a-input placeholder="请输入名称查询" v-model="queryParam.supplier"></a-input>
                                </a-form-item>
                            </a-col>
                            <a-col :md="4" :sm="24">
                                <a-form-item label="手机号码" :labelCol="labelCol" :wrapperCol="wrapperCol">
                                    <a-input placeholder="请输入手机号码查询" v-model="queryParam.telephone"></a-input>
                                </a-form-item>
                            </a-col>
                            <a-col :md="4" :sm="24">
                                <a-form-item label="联系电话" :labelCol="labelCol" :wrapperCol="wrapperCol">
                                    <a-input placeholder="请输入联系电话查询" v-model="queryParam.phonenum"></a-input>
                                </a-form-item>
                            </a-col>
                            <a-col :md="4" :sm="24">
                                <a-form-item label="渠道人" :labelCol="labelCol" :wrapperCol="wrapperCol">
                                    <a-select placeholder="请选择实际渠道人" showSearch v-model="queryParam.salesMan"
                                        :dropdownMatchSelectWidth="false" optionFilterProp="children" allowClear>
                                        <a-select-option v-for="(item, index) in purchaseList" :key="index"
                                            :value="item.id">
                                            {{ item.userName }}
                                        </a-select-option>
                                    </a-select>
                                </a-form-item>
                            </a-col>
                            <a-col :md="4" :sm="24">
                                <a-form-item label="供货品类" :labelCol="labelCol" :wrapperCol="wrapperCol">
                                    <a-select placeholder="请选择供货品类" showSearch v-model="queryParam.supplierClassId"
                                        :dropdownMatchSelectWidth="false" optionFilterProp="children" allowClear>
                                        <a-select-option v-for="(item, index) in supplyCategoryList" :key="index"
                                            :value="item.id">
                                            {{ item.name }}
                                        </a-select-option>
                                    </a-select>
                                </a-form-item>
                            </a-col>
                            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
                                <a-col :md="4" :sm="24">
                                    <a-button type="primary" @click="searchQuery">查询</a-button>
                                    <a-button style="margin-left: 8px" @click="searchReset">重置</a-button>
                                </a-col>
                            </span>
                        </a-row>
                    </a-form>
                </div>
                <!-- 操作按钮区域 -->
                <div class="table-operator" style="margin-top: 5px">
                    <a-button v-if="btnEnableList.indexOf(1) > -1" @click="handleAdd" type="primary"
                        icon="plus">新增</a-button>
                    <a-button v-if="btnEnableList.indexOf(1) > -1" @click="handleImportXls()" type="primary"
                        icon="import">导入</a-button>
                    <a-button type="primary" icon="download" @click="handleExportXls('供应商信息')">导出</a-button>
                    <a-dropdown>
                        <a-menu slot="overlay">
                            <a-menu-item key="1" v-if="btnEnableList.indexOf(1) > -1" @click="batchDel"><a-icon
                                    type="delete" />删除</a-menu-item>
                            <a-menu-item key="2" v-if="btnEnableList.indexOf(1) > -1"
                                @click="batchSetStatus(true)"><a-icon type="check-square" />启用</a-menu-item>
                            <a-menu-item key="3" v-if="btnEnableList.indexOf(1) > -1"
                                @click="batchSetStatus(false)"><a-icon type="close-square" />禁用</a-menu-item>
                        </a-menu>
                        <a-button> 批量操作 <a-icon type="down" /> </a-button>
                    </a-dropdown>
                </div>
                <!-- table区域-begin -->
                <div>
                    <a-table ref="table" size="middle" bordered rowKey="id" :columns="columns" :dataSource="dataSource"
                        :pagination="ipagination" :scroll="scroll" :loading="loading"
                        :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
                        @change="handleTableChange">
                        <span slot="action" slot-scope="text, record">
                            <a @click="handleEdit(record)">编辑</a>
                            <a-divider v-if="btnEnableList.indexOf(1) > -1" type="vertical" />
                            <a-popconfirm v-if="btnEnableList.indexOf(1) > -1" title="确定删除吗?"
                                @confirm="() => handleDelete(record.id)">
                                <a>删除</a>
                            </a-popconfirm>
                        </span>
                        <!-- 状态渲染模板 -->
                        <template slot="customRenderFlag" slot-scope="enabled">
                            <a-tag v-if="enabled" color="green">启用</a-tag>
                            <a-tag v-if="!enabled" color="orange">禁用</a-tag>
                        </template>
                    </a-table>
                </div>
                <!-- table区域-end -->
                <!-- 表单区域 -->
                <vendor-modal ref="modalForm" @ok="modalFormOk"></vendor-modal>
                <import-file-modal ref="modalImportForm" @ok="modalFormOk"></import-file-modal>
            </a-card>
        </a-col>
    </a-row>
</template>
<!-- b y 7 5 2 7  1 8 9 2 0 -->
<script>
import { queryUserListByRoleId, getUserList } from '@/api/api'
import VendorModal from './modules/VendorModal'
import ImportFileModal from '@/components/tools/ImportFileModal'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import JDate from '@/components/jeecg/JDate'
import Vue from 'vue'
import { getAction } from '@/api/manage'

export default {
    name: 'VendorList',
    mixins: [JeecgListMixin],
    components: {
        VendorModal,
        ImportFileModal,
        JDate,
    },
    data() {
        return {
            labelCol: {
                span: 5,
            },
            wrapperCol: {
                span: 18,
                offset: 1,
            },
            // 查询条件
            queryParam: {
                salesMan: undefined,
                supplier: '',
                type: '供应商',
                telephone: '',
                phonenum: '',
                roleType: Vue.ls.get('roleType'),
                supplierClassId: undefined,
            },
            ipagination: {
                pageSizeOptions: ['10', '20', '30', '100', '200'],
            },
            // 表头
            columns: [
                {
                    title: '#',
                    dataIndex: '',
                    key: 'rowIndex',
                    width: 60,
                    align: 'center',
                    customRender: function (t, r, index) {
                        return parseInt(index) + 1
                    },
                },
                {
                    title: '操作',
                    dataIndex: 'action',
                    width: 100,
                    align: 'center',
                    scopedSlots: { customRender: 'action' },
                },
                { title: '名称', dataIndex: 'supplier', width: 150, align: 'left' },
                { title: '联系人', dataIndex: 'contacts', width: 70, align: 'left' },
                { title: '手机号码', dataIndex: 'telephone', width: 100, align: 'left' },
                { title: '联系电话', dataIndex: 'phoneNum', width: 100, align: 'left' },
                { title: '电子邮箱', dataIndex: 'email', width: 150, align: 'left' },
                { title: '供货品类', dataIndex: 'supplierClassStr', width: 150, align: 'left' },
                { title: '期初应付', dataIndex: 'beginNeedPay', width: 80, align: 'left' },
                { title: '期末应付', dataIndex: 'allNeedPay', width: 80, align: 'left' },
                { title: '税率(%)', dataIndex: 'taxRate', width: 80, align: 'left' },
                { title: '渠道人', dataIndex: 'salesManStr', width: 60, align: 'left' },
                { title: '排序', dataIndex: 'sort', width: 60, align: 'left' },
                { title: '操作人', dataIndex: 'creatorStr', width: 70, align: 'left' },
                {
                    title: '状态',
                    dataIndex: 'enabled',
                    width: 60,
                    align: 'center',
                    scopedSlots: { customRender: 'customRenderFlag' },
                },
            ],
            url: {
                list: '/supplier/list',
                delete: '/supplier/delete',
                deleteBatch: '/supplier/deleteBatch',
                importExcelUrl: '/supplier/importVendor',
                exportXlsUrl: '/supplier/exportExcel',
                batchSetStatusUrl: '/supplier/batchSetStatus',
            },
            purchaseList: [],
            supplyCategoryList: [],
        }
    },
    computed: {
        importExcelUrl: function () {
            return `${window._CONFIG['domianURL']}${this.url.importExcelUrl}`
        },
    },
    created() {
        // queryUserListByRoleId({ roleId: 23 }).then((res) => {
        //     if (res) {
        //         this.purchaseList = res.data.users
        //     }
        // })
        getUserList({}).then((res) => {
            if (res) {
                this.purchaseList = res
            }
        })
        getAction('/materialClass/findMaterialClassByCurrentUser', { type: 1 }).then((res) => {
            if (res) {
                this.supplyCategoryList = res.data
            }
        })
    },
    methods: {
        searchReset() {
            this.queryParam = {
                type: '供应商',
            }
            this.loadData(1)
        },
        handleImportXls() {
            let importExcelUrl = this.url.importExcelUrl
            let templateUrl = '/doc/vendor_template.xls'
            let templateName = '供应商Excel模板[下载]'
            this.$refs.modalImportForm.initModal(importExcelUrl, templateUrl, templateName)
            this.$refs.modalImportForm.title = '供应商导入'
        },
        handleEdit: function (record) {
            this.$refs.modalForm.edit(record)
            this.$refs.modalForm.title = '编辑'
            this.$refs.modalForm.disableSubmit = false
            if (this.btnEnableList.indexOf(1) === -1) {
                this.$refs.modalForm.isReadOnly = true
            }
        },
    },
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>